import React from 'react';
import { connect } from 'dva';
import { List } from 'antd-mobile';
import { FlatList, Text, View } from 'react-native';
import VisibilitySensor from 'react-visibility-sensor';

import styles from './Classsort.css';

const Item = List.Item;
const Brief = Item.Brief;
class Classsort extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sortlist1: [
        { text: '全部', ischoose: true, order: 1 },
        { text: '数学奥赛', ischoose: false, order: 2 },
        { text: '英语口语', ischoose: false, order: 3 },
        { text: '地生会考', ischoose: false, order: 4 },
        { text: '英语听力', ischoose: false, order: 5 },
        { text: '物理竞赛', ischoose: false, order: 6 },
        { text: '信息学竞赛', ischoose: false, order: 7 },
        { text: '化学竞赛', ischoose: false, order: 8 }
      ],
      nowsortlist1text: '全部',
      sortlist2: [
        { text: '全部', ischoose: true, order: 1 },
        { text: '八年级', ischoose: false, order: 2 },
        { text: '小升初', ischoose: false, order: 3 },
        { text: '幼儿园升小学', ischoose: false, order: 4 },
        { text: '九年级', ischoose: false, order: 5 },
        { text: '高中', ischoose: false, order: 6 },
      ],
      nowsortlist2text: '全部',
    }
  }
  sortlist1change(e) {
    let currenttext = e.target.innerHTML;
    if (currenttext === this.state.nowsortlist1text) {
      return;
    }
    let tempsortlist = this.state.sortlist1;
    let sortlist = tempsortlist.map(
      function (item) {
        item.text === currenttext ? item.ischoose = true : item.ischoose = false;
        return item;
      }
    );
    this.setState({
      sortlist1: sortlist,
      nowsortlist1text: currenttext
    })
    this.getchange(currenttext, this.state.nowsortlist2text)
  }
  sortlist2change(e) {
    let currenttext = e.target.innerHTML;
    if (currenttext === this.state.nowsortlist2text) {
      return;
    }
    let tempsortlist = this.state.sortlist2;
    let sortlist = tempsortlist.map(
      function (item) {
        item.text === currenttext ? item.ischoose = true : item.ischoose = false;
        return item;
      }
    );
    this.setState({
      sortlist2: sortlist,
      nowsortlist2text: currenttext
    })
    this.getchange(this.state.nowsortlist1text, currenttext) //to change sort
  }
  getmore() {
    this.props.dispatch({
      type: 'classsortmodel/getinfo',
      payload: { sorttext1: '全部', sorttext2: '全部' }
    })
  }
  getchange(m, n) {
    let sorttext1 = m
    let sorttext2 = n
    this.props.dispatch({
      type: 'classsortmodel/getinfochange',
      payload: { sorttext1: sorttext1, sorttext2: sorttext2 }
    })
  }
  render() {
    console.log(this.props)
    let classlist = this.props.classlist.map((item) => (
      <Item multipleLine arrow="horizontal" key={item.id}>
        {item.classname}
        <Brief>{item.brief}</Brief>
        <Brief>当前学习人数： {item.learningnum}</Brief>
        <Brief>Rate： {item.rate}</Brief>
        <Brief>教师： {item.teacher}</Brief>
        <Brief>价格： ￥{item.price}</Brief>
      </Item>
    ))
    return (
      <div className={styles.taglistbox} style={{ flex: 1, flexDirection: 'column' }}>
        <FlatList
          className={styles.flatlistbox}
          data={this.state.sortlist1}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          renderItem={({ item }) => (
            <View
              className={item.ischoose ? styles.bottomalive : ' ' + styles.basicstyle}
              onClick={(e) => this.sortlist1change(e)}
            >
              <Text>{item.text}</Text>
            </View>
          )}
        />
        <FlatList
          className={styles.flatlistbox}
          data={this.state.sortlist2}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          renderItem={({ item }) => (
            <View
              className={item.ischoose ? styles.bottomalive : ' ' + styles.basicstyle}
              onClick={(e) => this.sortlist2change(e)}
            ><Text>{item.text}</Text></View>
          )}
        />
        <br />
        <List size="large">
          {classlist}
        </List>
        <VisibilitySensor onChange={(e) => { if (e && this.props.hasmore) this.getmore() }}>
          <div>{this.props.hasmore ? 'Loading' : 'no more info'}</div>
        </VisibilitySensor>
      </div>
    )
  }
}

Classsort.propTypes = {
};
function mapStateToProps(state) {
  return state.classsortmodel
}

export default connect(mapStateToProps)(Classsort);
